import React from 'react';
import { Toast, Icon, Picker, Button, InputItem, List, DatePicker, Flex, Badge } from 'antd-mobile';
import { createForm } from 'rc-form';
import _ from 'lodash';
import moment from 'moment';
import styles from './VipEditForm.less';

class VipEditForm extends React.Component {
  constructor(props) {
    super(props);
    const birthdayVaild = this.checkBirthday(props.vip.birthday);
    this.state = {
      birthdayVaild,
      loading: props.loading || false,
    };
  }

  submit = () => {
    this.props.form.validateFields((error) => {
      if (!error) {
        if (this.props.onSubmit) {
          const value = this.props.form.getFieldsValue();
          if (value.mobile) {
            value.mobile = value.mobile.replace(/\s/ig, '');
          }
          if (value.vip_sex) {
            value.vip_sex = value.vip_sex[0];
          }
          if (value.birthday) {
            value.birthday = value.birthday.startOf('day');
          }
          this.props.onSubmit(value);
          this.setState({
            loading: true,
          });
        }
      } else {
        Toast.fail(_.map(error, (v) => {
          return _.get(v, 'errors[0].message');
        })[0], 2);
        this.setState({
          loading: false,
        });
      }
    });
  };

  renderHeader = () => {
    return (<div style={{ position: 'relative' }}>
      请确认并完善会员资料
      <span
        style={{
          position: 'absolute', right: 3, top: -5,
        }}
        onClick={() => {
          if (this.props.onClose) {
            this.props.onClose();
          }
        }}
      >
        <Icon type="cross"/>
      </span>
    </div>);
  };

  checkBirthday = (birthday) => {
    if (!birthday) {
      return false;
    }
    let birthdayVaild = false;
    const birth = moment(birthday);
    const now = moment();
    if (birth.isValid()) {
      const diff = now.diff(birth, 'years');
      if (diff >= -2 && diff <= 14) {
        birthdayVaild = true;
      }
    }
    return birthdayVaild;
  };

  onBirthdayChange = (data) => {
    const birthdayVaild = this.checkBirthday(data);
    this.setState({
      birthdayVaild,
    });
  };

  render() {
    const {
      vip: { card_id, mobile, vip_tel, vip_name, birthday, vip_sex, vip_add },
      form: { getFieldProps, getFieldError },
    } = this.props;
    return (<div className="vipEditForm">
      <List
        renderHeader={this.renderHeader}
        className="popup-list"
      >
        <InputItem
          error={!!getFieldError('card_id')}
          {...getFieldProps('card_id', {
            initialValue: card_id,
            rules: [{ required: true, message: '会员卡号' }],
          })}
          type="text"
          placeholder=""
          editable={false}
          className="disabled"
        >会员卡号</InputItem>
        <InputItem
          error={!!getFieldError('mobile')}
          {...getFieldProps('mobile', {
            initialValue: mobile || vip_tel,
            rules: [{ required: true, message: '手机号码必填' }],
          })}
          type="phone"
          placeholder=""
          editable={(!mobile && !vip_tel)}
          className={{ "disabled": (mobile || vip_tel) }}
        >手机号码</InputItem>
        <InputItem
          error={!!getFieldError('vip_name')}
          {...getFieldProps('vip_name', {
            initialValue: vip_name,
            rules: [{ required: true, message: '请输入会员姓名' }, { max: 8, message: '姓名长度不能超过8位' }],
          })}
          type="text"
          placeholder=""
        >会员姓名</InputItem>
        <Picker
          data={[
            {
              label: '男',
              value: '男',
            },
            {
              label: '女',
              value: '女',
            }]}
          cols={1}
          {...getFieldProps('vip_sex', {
            initialValue: [vip_sex || '男'],
            rules: [{ required: true, message: '请选择宝宝性别' }],
          })}
        >
          <List.Item arrow="horizontal">宝宝性别</List.Item>
        </Picker>
        <DatePicker
          mode="date"
          title="选择宝宝生日"
          maxDate={moment().add(2, 'years')}
          minDate={moment().subtract(12, 'years')}
          {...getFieldProps('birthday', {
            onChange: (data) => {
              this.onBirthdayChange(data);
            },
            initialValue: birthday ? moment(birthday) : null,
            rules: [{ required: true, message: '请选择宝宝生日' }],
          })}
        >
          <List.Item arrow="horizontal">宝宝生日
            {
              (() => {
                if (this.state.birthdayVaild) {
                  return;
                }
                return (<Badge
                  text="请选择正确的生日！"
                  style={{
                    marginLeft: 12,
                    padding: '0 0.06rem',
                    backgroundColor: '#fff',
                    borderRadius: 2,
                    color: 'red',
                    border: '1px solid red',
                  }}
                />);
              })()
            }
          </List.Item>
        </DatePicker>
        <InputItem
          error={!!getFieldError('vip_add')}
          {...getFieldProps('vip_add', {
            initialValue: vip_add || '',
            rules: [{ max: 80, message: '地址长度不能超过80位' }],
          })}
          type="text"
          placeholder=""
        >地址</InputItem>
      </List>
      <ul style={{ padding: '0.18rem 0.3rem', listStyle: 'none' }}>
        <li style={{ marginTop: '0.18rem' }}>
          <Button disabled={!this.state.birthdayVaild} type="primary" loading={this.state.loading}
                  onClick={() => this.submit()}>确定</Button>
        </li>
      </ul>
    </div>);
  }
}

VipEditForm.propTypes = {
  loading: React.PropTypes.bool,
  vip: React.PropTypes.object,
  onClose: React.PropTypes.func,
  onSubmit: React.PropTypes.func,
};

export default createForm()(VipEditForm);
